import React, { Component, } from 'react';
import {base,} from "nc-lightapp-front";
const {NCModal, NCButton, NCTextArea} = base;
import classNames from 'classnames';
import 'src/sscrp/public/iconfont/iconfont.css'
import './eModal.less'

export default class EvaluateModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      dataSource: {},
      resultInfoCache: {
        index: -1, // 索引
        result: -1, // 评分
      }, // 星星评分信息缓存
      showReasons: [], // 是否展示不满意原因
    }
  }
  // 打开时
  onEnter = () => {
    if (this.props.modalOnEnter) this.props.modalOnEnter()
  }
  // 初始化配置
  initConfig = (dataSource, showReasons) => this.setState({dataSource, showReasons})
  // 隐藏
  onHide = () => {
    this.setState({dataSource: {}})
    this.props.onHide()
  }
  // 鼠标滑入星星区域 缓存当前行评价结果信息
  itemMouseEnter = (index, result) => {
    if (this.props.currentKey === 'Evaluated') return
    this.setState({resultInfoCache: {
      index, result,
    }})
  }
  // 星星划入
  eachStarMouseEnter = (index, starIndex) => {
    if (this.props.currentKey === 'Evaluated') return
    const {dataSource} = this.state
    dataSource.dimension[index].result = `${starIndex}`
    this.setState({dataSource})
  }
  // 星星点击
  eachStarClick = (index, starIndex) => {
    if (this.props.currentKey === 'Evaluated') return
    const {dataSource, resultInfoCache, showReasons} = this.state
    dataSource.dimension[index].result = `${starIndex}`
    showReasons[index] = Number(starIndex) < 3 ? true : false
    
    // 改变result
    dataSource.result = Math.min(...dataSource.dimension.map(each => Number(each.result)))

    // 选择三星及以上 清空不满意原因
    if (Number(starIndex) >= 3) dataSource.dimension[index].reason.forEach(eachReason => eachReason.select = 'off')

    this.setState({dataSource, resultInfoCache: {
      index, result: starIndex, showReasons,
    }})
  }
  // 鼠标划出星星区域 同步数据
  itemMouseLeave = () => {
    if (this.props.currentKey === 'Evaluated') return
    const {dataSource, resultInfoCache: {index, result}} = this.state
    dataSource.dimension[index].result = `${result}`
    this.setState({dataSource})
  }
  handlerCancel = () => {
    this.setState({dataSource: {}})
    this.props.onHide()
  }
  // 不满意原因点击 select取反
  eachReasonClick = (index, reasonIndex) => {
    if (this.props.currentKey === 'Evaluated') return
    const {dataSource} = this.state, select = dataSource.dimension[index].reason[reasonIndex].select
    dataSource.dimension[index].reason[reasonIndex].select = select === 'on' ? 'off' : 'on'
    this.setState({dataSource})
  }
  // 显示结果计算
  getEachRetTxt = result => {
    const { multiLang } = this.props
    if (result === 0) {
      return <span>{''}</span>
    } else if (result <= 1) {
      return <span className='result-red'>{multiLang['7015-EVALUATION-013']}</span>
    } else if (result <= 2) {
      return <span className='result-red'>{multiLang['7015-EVALUATION-012']}</span>
    } else if (result <= 3) {
      return <span className='result-red'>{multiLang['7015-EVALUATION-011']}</span>
    } else if (result <= 4) {
      return <span className='result-green'>{multiLang['7015-EVALUATION-010']}</span>
    } else if (result <= 5) {
      return <span className='result-green'>{multiLang['7015-EVALUATION-009']}</span>
    } else {
      return <span>{''}</span>
    }
  }
  // 评价内容
  textAreaOnChange = val => {
    const {dataSource} = this.state
    dataSource.evaluate_content = val
    this.setState({dataSource})
  }
  // 保存
  handlerSure = () => {
    if (this.props.currentKey === 'Evaluated') {
      this.setState({dataSource: {}})
      this.props.onHide()
    } else {
      this.props.evaluatSave(this.state.dataSource)
    }
  }

  render() {
    const {
      props: {
        showEvaluateModal,
        multiLang,
        currentKey,
        from,
      },
      state: {
        dataSource, showReasons,
      },
      onEnter,
      onHide,
      textAreaOnChange,
      handlerSure,
      handlerCancel,
      eachReasonClick,
      itemMouseEnter,
      eachStarMouseEnter,
      eachStarClick,
      itemMouseLeave,
    } = this

    const { dimension, } = dataSource

    return (
      <NCModal
        fieldid="EvaluateModal"
        show={showEvaluateModal} 
        onHide={onHide}
        onEnter={onEnter}
        id='evaluate-modal'
        size='lg'
      >
        <NCModal.Header closeButton={true}>
            <NCModal.Title>{multiLang['7015-EVALUATION-029']}</NCModal.Title>
        </NCModal.Header>
        <NCModal.Body>
          <div className={classNames('evaluation-details', {'evaluated-details': currentKey === 'Evaluated'})}>
            <div className='evaluation-header'>
              {/* 未评价 */}
              <div className={classNames(
                'not-evaluate',
                { hide: currentKey !== 'NoEvaluation' && from !== 'sscrp', },
              )}>
                <i className='ssc-iconfont iconweixiao'/>
                {/* 本次报账已结，请对我们本次的共享服务进行评价，谢谢！ */}
                <span>{multiLang['7015-EVALUATION-004']}</span>
              </div>
              {/* 已评价 */}
              <div className={classNames(
                'evaluated',
                { hide: currentKey === 'NoEvaluation' || from === 'sscrp', },
              )}>
                <i className='ssc-iconfont iconchenggong'/>
                {/* 评价已经完成，谢谢您的参与！ */}
                <span>{multiLang['7015-EVALUATION-027']}</span>
              </div>
            </div>
            <div className='evaluation-body'>
              <ul>

                {dimension && dimension.map((item, index, dimension) => {

                  // 显示结果计算
                  const resultTxtJsx = this.getEachRetTxt(Number(item.result))

                  return (
                    <li>
                      <div className='evaluation-item--top'>
                        {/* 评价维度 */}
                        <span>{item.name}:</span>
                        {/* 星星 */}
                        <span
                          onMouseEnter={() => itemMouseEnter(index, item.result)}
                          onMouseLeave={() => itemMouseLeave()}
                        >
                          <i
                            className={classNames('ssc-iconfont', {iconxingxingyellow: Number(item.result) >= 1, iconxingxinggray: Number(item.result) < 1, hide: Number(item.result) < 1 && currentKey === 'Evaluated'})}
                            onMouseEnter={() => eachStarMouseEnter(index, 1)}
                            onClick={() => eachStarClick(index, 1)}
                          ></i>
                          <i
                            className={classNames('ssc-iconfont', {iconxingxingyellow: Number(item.result) >= 2, iconxingxinggray: Number(item.result) < 2, hide: Number(item.result) < 2 && currentKey === 'Evaluated'})}
                            onMouseEnter={() => eachStarMouseEnter(index, 2)}
                            onClick={() => eachStarClick(index, 2)}
                          ></i>
                          <i
                            className={classNames('ssc-iconfont', {iconxingxingyellow: Number(item.result) >= 3, iconxingxinggray: Number(item.result) < 3, hide: Number(item.result) < 3 && currentKey === 'Evaluated'})}
                            onMouseEnter={() => eachStarMouseEnter(index, 3)}
                            onClick={() => eachStarClick(index, 3)}
                          ></i>
                          <i
                            className={classNames('ssc-iconfont', {iconxingxingyellow: Number(item.result) >= 4, iconxingxinggray: Number(item.result) < 4, hide: Number(item.result) < 4 && currentKey === 'Evaluated'})}
                            onMouseEnter={() => eachStarMouseEnter(index, 4)}
                            onClick={() => eachStarClick(index, 4)}
                          ></i>
                          <i
                            className={classNames('ssc-iconfont', {iconxingxingyellow: Number(item.result) === 5, iconxingxinggray: Number(item.result) < 5, hide: Number(item.result) < 5 && currentKey === 'Evaluated'})}
                            onMouseEnter={() => eachStarMouseEnter(index, 5)}
                            onClick={() => eachStarClick(index, 5)}
                          ></i>
                        </span>
                        {/* 结果 */}
                        { resultTxtJsx }
                      </div>
                      {/* 不满意原因 */}
                      {
                        showReasons[index] &&
                        (
                          <div className='evaluation-item--bottom'>
                            
                            {
                              !item.reason.length
                              ? <span className='has-no-reason'>{multiLang['7015-EVALUATION-030']}</span>
                              : item.reason.map((eachReason, reasonIndex, reason) => {
                                const className = eachReason.select
                                return (
                                  <span
                                  className={className}
                                  onClick={() => eachReasonClick(index, reasonIndex)}
                                  >{eachReason.name}</span>
                                )
                              })
                            }
                          </div>
                        )
                      }
                    </li>
                  )
                })}

                {
                  showReasons.some(ele => ele) &&
                  (
                    <li>
                      {
                        currentKey === 'Evaluated' ?
                        <span className='evaluate-content'>{dataSource.evaluate_content}</span> :
                        <NCTextArea
                          value={dataSource.evaluate_content}
                          onChange={textAreaOnChange}
                          placeholder={multiLang['7015-EVALUATION-008']} // 请填写您遇到的问题
                          fieldid="evaluate-reason--textarea"
                          showMax={true}
                          max={100}  
                          rows={4}
                          canResize={false}
                        />
                      }
                    </li>
                  )
                }

              </ul>
            </div>
          </div>
        </NCModal.Body>
        <NCModal.Footer className={classNames({hide: this.props.currentKey === 'Evaluated'})}>
          {/* 确定 */}
          <NCButton
            fieldid='evaluate-save' 
            colors='primary' 
            onClick={handlerSure}
          >{multiLang['7015-EVALUATION-014']}</NCButton>
          {/* 取消 */}
          <NCButton 
            fieldid='evaluate-cancel' 
            onClick={handlerCancel}
          >{multiLang['7015-EVALUATION-015']}</NCButton>
        </NCModal.Footer>
      </NCModal>
    )
  }
}